import React, {Component} from 'react';
import { Button, Table, Input } from 'antd';
import BreadcrumbBar from '@/common/BreadcrumbBar';//面包屑组件
import ToolBar from '@/common/ToolBar';//操作栏组件

const Search = Input.Search;

class Resource extends Component {
	constructor(props) {
		super(props);	
		this.state = {
			dataSource:[{
				id: '1',
				name: '工程师',
				description: '删除，创建',
			  }]
		}

		this.columns = [
			{ title: '资源名称', dataIndex: 'name', key: 'name', },
			{ title: '可操作性', dataIndex: 'description', key: 'description', },
			{ title: '操作', dataIndex: 'operator', key: 'operator', 
				render: (text, record, index) => {
					return (
						<div>
							<Button>编辑</Button>&nbsp;
							<Button type="danger">删除</Button>
						</div>
					)
				}
			},
		];
	}
    render() {
        return (
            <div>
		   		<BreadcrumbBar one="系统管理" two="资源管理"/>
				<ToolBar>
					<Button>添加资源</Button>
					<Search placeholder="请输入资源名称" 
						onSearch={value => console.log(value)}
						style={{ width: 200, float: 'right' }}
					/>
				</ToolBar>
				<Table 
					dataSource={this.state.dataSource} 
					rowKey={record => record.id}
					columns={this.columns} 
					loading={false}
					pagination={{
						showTotal:(total, range) => `共 ${total} 条  显示  ${range[0]}-${range[1]} 条`
					}}
					bordered={true} 
				/>
		   </div>
        )

    }
}

export default Resource;